import React,{useState,useEffect, useMemo} from "react";
import { Input,Select,Modal,Space,Radio,message    } from 'antd';
import type { RadioChangeEvent } from 'antd';
import request from "../../../utils/axios";
import './SubaccountAdd.less'

interface SubaccountAddType{
    isModalOpenAdd:boolean,
    handleCancelAdd: (data: boolean) => void;
}

interface DataType {
    key:React.Key,
    _id:string;
    username: string;
    password: string;
    mobile: string;
    newTime: string;
    loginTime: string;
    standing:any;
    status:boolean,
    level:number
}

const SubaccountAdd:React.FC<SubaccountAddType>=({isModalOpenAdd,handleCancelAdd})=>{
    const [username,setUserName]=useState('')
    const [mobile,setMobile]=useState('')
    const [password,setPassword]=useState('')
    const [standing, setStanding] = useState('');
    const [userList,setUserList]=useState([])

    const getuser=async()=>{
        request.get('getuser').then(error=>{
            console.log(error);
        }).catch(response=>{
            setUserList(response.data.userList)
        })
    }

    //选择身份
    const [standingList, setStandingList] = useState([]);
    const getstanding=async()=>{
        request.get('getstanding').then(error=>{
            console.log(error);
        }).catch(response=>{
            setStandingList(response.data.standingList)
        })
    }
    const newStandingList=useMemo(()=>{
        let list:any=[]
        standingList.forEach((item:any)=>{
            if(item.name!='超级管理员'){
                list.push(item)
            }
        })
        return list
    },[standingList])
    const onChange = (e: RadioChangeEvent) => {
        setStanding(e.target.value);
    };

    //手机号地区
    const options = [
        {
            value: '+86中国大陆',
            label: '+86中国大陆',
        },
        {
            value: '+852中国香港',
            label: '+852中国香港',
        },
        {
            value: '+853中国澳门',
            label: '+853中国澳门',
        },
        {
            value: '+886中国台湾',
            label: '+886中国台湾',
        },
    ];

    const newUserList = useMemo(() => {
        let list:any=[]
        userList.forEach((item:DataType)=>{
            if(item.level==2){
                list.push(item)
            }
        })
        return list
    }, [userList]);

    //添加子账号
    const handleOkAdd=async()=>{
        if(newUserList.length==20){
            message.info('最多可添加20个子账号');
        }else{
            request.post('adduser',{username:username,
                mobile:mobile,
                password:password,
                standing:standing,
                uid:'66c54cd4e2342e351022e0f0'
            }).then(error=>{
                console.log(error);
            }).catch(response=>{
                handleCancelAdd(false)
            })
        }
    }

    const handleCancel=()=>{
        handleCancelAdd(false)
    }

    useEffect(()=>{
        getstanding()
        getuser()
    },[])

    return (
        <div>
            <Modal width={600} title="添加子账号" open={isModalOpenAdd} onOk={handleOkAdd} onCancel={handleCancel} okText='确定' cancelText='取消'>
                <div className="subaccount-add-box">
                    <div className="subaccount-add-input">
                        <label>账号名称：</label>
                        <p>
                            <Space.Compact>
                                <Input style={{ width: '20%' }} defaultValue="admin：" />
                                <Input style={{ width: '70%' }} onChange={(e)=>{setUserName(e.target.value)}} placeholder="仅支持1-10位字母和数字"/>
                            </Space.Compact>
                        </p>
                        <p style={{color:'gray',marginLeft:'-20px'}}>{username.length}/10</p>
                    </div>
                    <div className="subaccount-add-input">
                        <label>手机号码：</label>
                        <p>
                            <Select defaultValue="+86中国大陆" options={options} style={{ width: '30%' }}/>
                            <Input placeholder="请输入手机号" onChange={(e)=>{setMobile(e.target.value)}} style={{width:'214px',marginLeft:'15px'}}></Input>
                        </p>
                    </div>
                    <div className="subaccount-add-input">
                        <label>登录密码：</label>
                        <Input placeholder="支持6-20位字母数字组合" type="password" onChange={(e)=>{setPassword(e.target.value)}} style={{width:'71%'}}></Input>
                        <p style={{color:'gray',marginLeft:'10px'}}>{password.length}/20</p>
                    </div>
                    <div className="subaccount-add-input" style={{marginBottom:'25px'}}>
                        <label>身份：</label>
                        {
                            newStandingList.map((item:any)=>{
                                return  <Radio.Group onChange={onChange} value={standing} style={{marginLeft:'19px'}}>
                                            <Radio value={item._id}>{item.name}</Radio>
                                        </Radio.Group>
                            })
                        }
                    </div>
                </div>
            </Modal>
        </div>
    )
}

export default SubaccountAdd